<template>
  <div class="min-height-500">
    <div class="uk-child-width-1-2" uk-grid>
      <div>
        <PhotoCard
          v-for="article in leftArticles"
          :key="article.id"
          :article="article"
        />
      </div>
      <div>
        <div class="uk-child-width-1-2" uk-grid>
          <PhotoCard
            v-for="article in rightArticles"
            :key="article.id"
            :article="article"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PhotoCard from "@/components/PhotoCard";
export default {
  components: {
    PhotoCard,
  },
  props: {
    articles: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    leftArticlesCount() {
      return Math.ceil(this.articles.length / 5);
    },
    leftArticles() {
      return this.articles.slice(0, this.leftArticlesCount);
    },
    rightArticles() {
      return this.articles.slice(this.leftArticlesCount, this.articles.length);
    },
  },
};
</script>
